<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：插值表达式</h1>
            <p>我是变量：{{msg}} </p>
            <p>我是表达式：{{56-89}}</p>
            <p>num:{{num+1}}</p>
            <p>我是条件运算符{{1+1==2?'true':'false'}}</p>
            <p>我是方法{{add()}}</p>
        <!-- <p>我是变量：{{++num }} </p> -->
        <h1>知识点2：data</h1>
            <h3>在控制台中可以通过实例名.$data的形式访问或修改data数据</h3>
        <h1>知识点3：methods</h1>
            <p>{{sub(-100)}}</p>
        <h1>知识点4：computed 计算属性</h1>
            <h3>遇到复杂的逻辑是，vue.js框架提倡使用这个。在一个计算属性里面可以
                完成各种复杂的逻辑，包括逻辑运算或函数调用等，最终返回一个值
            </h3>
            <p>{{revMethod()}}</p>
            <p>{{rev}}</p>
            <p>{{double}}</p>
            <h3>计算属性是基于其依赖值进行缓存的，
                计算属性只有在它相关的依赖发生变化才重新求值
                而方法则是在每次页面进行重新渲染是都会进行计算
            </h3>
            <h3>计算属性通常是只读</h3>
            <button @click="double=100">尝试修改double</button>
            <h3>通过传入一个set，get可以得到一个可读可写的计算属性</h3>
            <h3>绝大多情况下，只有使用默认的get函数来读取一个计算属性，在实际业务很少使用到
                set。所以我们通常使用计算属性时，不必将set,get都申明
            </h3>
        <h1>知识点4：watch 侦听器</h1>
            <h3>我们需要再状态变化时，执行一些其他的操作，watch具有状态监听功能
                只要监听到当前vue实例中的数据变化，就会调用当前数据所绑定的方法
            </h3>
            <h4>1.函数侦听器：在watch选项中申明的函数即为函数式侦听器。其中函数就是我们要侦听的对象</h4>    
            <h4>2.对象侦听器：在watch选项中申明的对象即为对象式侦听器。其中对象名就是我们要侦听的对象</h4>
            <h4>对象式侦听器还有两个参数，deep(true:深层次侦听子对象)，immediate(不管对象是否改变，都执行一遍)</h4>
            <h4>if侦听的需求比较简单，也不会涉及日后的拓展问题，可以使用函数式侦听器
                if侦听的需求比较复杂，比如有多层对象，或者需要立即执行一次，或者方便日后拓展，就使用对象式侦听器
            </h4>
        </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data(){
            return{
                msg:'我的第一个vue页面',
                num:1,
                grade:60,
                users:{
                    name:'Alice',
                    age:18
                }
            }
        },
        //vue的方法区域
        methods: {
            add(){
                return this.num + 100
            },
            sub:function(val){
                return this.num - val
            },
            revMethod(){
                console.log("我是方法，我被调用了1次")
                return this.msg.split('').reverse().join('')
            }
        },
        //vue计算属性区域
        computed:{
            rev(){
                console.log("我是计算属性，我被调用了1次")
                return this.msg.split('').reverse().join('')
            },
            // double(){
            //     // console.log("我是计算属性，我被调用了1次")
            //     return this.num * 2.5
            // }
            double:{
                get:function(){
                    return this.num * 2
                },
                set:function(val){
                    this.num = val / 2
                }
            }
        },//alt+shift+↓
        watch:{
            grade(newData, oldData){
                console.log('更新前的数据：' + oldData);
                console.log('更新后的数据：' + newData);
                if (newData > oldData) console.log("有进步");
                else console.log("退步");
            },
            'users.age':{
                handler(newData, oldData){
                    console.log('更新前的数据：' + oldData);
                    console.log('更新后的数据：' + newData);
                    if (newData > 120 || newData < 0)
                        console.log("你确定你输入的是正常人的年龄吗？");
                }    
            }
        }
        
    }).mount('#app')
</script>